<template>
    <div class="Catbalance">
        <div class="Cat-top-up">
            <div class="Cat-top-up-left">
                <img style="width: 63px;height:63px" src="/images/形状 1 拷贝 2.png" />
                <span style="font-weight: bold;font-size: 27px;">猫币余额</span>
                <span style="margin-top:6px;">{{userinfoa.cat_coin}}</span>
            </div>
            <div class="Cat-top-up-right">
                <span @click="rechargeCatCoin">充值猫币</span>
            </div>
        </div>
        <div class="Cat-Sign-in">
            <div class="Cat-Sign-in-timer">
                <label>
                    <span>2020年5月16日</span>
                    <span>星期六</span>
                </label>
                <label>
                    <span v-if="Sign" @click="Signin">已签到</span>
                    <span v-else @click="Signin">签到</span>
                </label>
            </div>
            <div class="Cat-Sign-in-step">
                <el-steps :active="days" align-center>
                    <el-step title="第一天"  description="已签到"></el-step>
                    <el-step title="第二天" ></el-step>
                    <el-step title="第三天" ></el-step>
                    <el-step title="第四天" ></el-step>
                    <el-step title="第五天" description=''></el-step>
                    <el-step title="第六天" description=''></el-step>
                    <el-step title="第七天" description=''></el-step>
                </el-steps>
            </div>
        </div>
        <div class="Cat-task">
            <div class="Cat-task-title">
                <span>做任务赢猫币</span>
            </div>
            <div class="Cat-task-con">
                <ul v-for="(item,index) in taskList" :key="index">
                    <li>
                        <span class="Cat-task-con-title">{{item.introduce}}</span>
                        <span class="Cat-task-con-title-lo">完成{{item.canbeled_count}}/{{item.frequency}}</span>
                    </li>
                    <li>
                        <span style="color:red;font-size:14px">+{{item.gold_num}}猫币</span>
                    </li>
                    <li>
                        <span class="hascompal" v-if="item.canbeled_count == item.frequency">已完成</span>
                        <span v-else>前往</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'Catbalance',
    data(){
        return{
            Sign:false,
            taskList:[
                {
                  tasktitle:'实名认证',
                  taskcompleted:0,
                  taskunfinished:1,
                  taskreward:50,
                },
                {
                  tasktitle:'境外身份认证',
                  taskcompleted:5,
                  taskunfinished:10,
                  taskreward:100,
                },
                {
                  tasktitle:'好奇互动',
                  taskcompleted:0,
                  taskunfinished:13,
                  taskreward:15,
                },
                {
                  tasktitle:'发布好奇',
                  taskcompleted:0,
                  taskunfinished:1,
                  taskreward:10,
                },
                {
                  tasktitle:'好奇回应',
                  taskcompleted:0,
                  taskunfinished:1,
                  taskreward:50,
                }
            ],
            days:'',
            userinfoa:JSON.parse(localStorage.getItem('userinfo')),
        }
    },
    methods:{
        rechargeCatCoin(){
            console.log("充值猫币")
            this.$router.push({ path: "/views/Learningcenter/Buycatcurrency" });
        },
        Signin(){
            var data ={
                user_id:this.userinfoa.user_id,
                cat_coin:10*this.days,
            }
            this.$axios({
                method:'POST',
                url:'http://101.37.66.151:8768/eg-api/user/signIn/insert',
                data:data,
            }).then((response) =>{
                console.log(response.data.data)
                this.Sign = true
                alert(response.data.data.remark)
                this.getSigin()
            }).catch((error) =>{
                console.log(error)
            })
        },
        getSigin(){
            var data ={
                user_id:this.userinfoa.user_id,
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/signIn/querySignDetail',
                params:data,
            }).then((response) =>{
                this.days = response.data.data.day
                if(response.data.data.today_sign_in){
                    this.Sign = true
                }
            }).catch((error) =>{
                console.log(error)
            })
        },
        taskLists(){
            var data ={
                oper_id:this.userinfoa.user_id,
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userGoldType/query',
                params:data,
            }).then((response) =>{
                console.log(response.data.data)
                this.taskList = response.data.data
            }).catch((error) =>{
                console.log(error)
            })
        }
    },
    mounted(){
        this.getSigin()
        this.taskLists()
    }
}
</script>
<style lang="less" scoped>
    .Catbalance{
        width: 90%;
        div{
            border-radius: 15px;
            background: #ffffff;  
        }
    }
    /*充值猫币样式*/
    .Cat-top-up{
        position: relative;
        width: 100%;
        height: 155px;
        display: flex;
        align-items: center;
        justify-content: center;
        div{
           width: 50%;
            height: 155px;
        }
    }
    .Cat-top-up-left{
        display: flex;
        width: 50%!important;
        margin-left: 40px;
        align-items: center;
        color: rgba(71,206,207,1);
        span{
            margin-left: 4%;
            font-size: 22px;
        }
    }
    .Cat-top-up-right{
        display: flex;
        height: 100%;
        justify-content: flex-end;
        margin-right: 40px;
        align-items: center;
        span{
            display:inline-block;
            width: 40%;
            height: 40px;
            background: #47cecf;
            text-align: center;
            line-height: 40px;
            border-radius: 20px;
            color: #ffffff;
            font-weight: bold;
            cursor: pointer;
        }
    }
    /*猫币签到样式*/
    .Cat-Sign-in{
        position: relative;
        width: 100%;
        height: 250px;
        margin-top: 12px;
    }
    .Cat-Sign-in-timer{
        position: relative;
        width: 90%;
        margin: 0 auto;
        display: flex;        
        height: 60px;
        margin-left: 40px;
        align-items: center;
        padding-top: 20px;
        margin-right: 40px;
        label{
            flex: 1;
            color: #47cecf;
            img{
                background: red;
            }
            span{
                margin-left: 4%;
                cursor: pointer;
            }
        }
    }
    .Cat-Sign-in-timer>label>span:first-child{
        font-size: 26px;
        font-weight: bold;
    }
    .Cat-Sign-in-timer>label:last-child{
        text-align: right;
        span{
            display: inline-block;
            width: 57px;
            height: 80px;
            font-size: 14px;
            color: red;
            margin-top: 20px;
            line-height: 80px;
            text-align: center;
            background-image: url('/images/日历 拷贝@2x.png');
            background-repeat: no-repeat;
            cursor: pointer;
        }
        
    }
    .Cat-Sign-in-step{
        position: relative;
        width: 90%;
        margin: 0 auto;
        margin-top: 60px;
        margin-left: 40px;
        /deep/.el-step{
            position: static;
        }
        /deep/.el-step__description{
            margin-top: -90px;
            font-size: 14px;
            color:#C0C4CC;
        }
        /deep/.el-step__title.is-finish{
            color: #47cecf;
            font-size: 14px;
        }
        /deep/.el-step__head.is-finish{
            color: #47cecf;
            border: #47cecf;  
        }
        /deep/.el-step__title.is-process{
            color: #C0C4CC;
            font-weight: normal;
        }
        /deep/.el-step__head.is-process{
            color: #C0C4CC;
            border: #C0C4CC;
        }
        // /deep/.el-step__icon{
        //     width: 30px;
        //     height: 30px;
        //     border-radius: 30px;
        // }
        // /deep/.el-step__icon-inner::before{
        //     content:'';
        //     display: block;
        //     background-image: url('/images/图层 26 拷贝 3@2x');
        //     background-repeat: no-repeat;
        //     width: 30px;
        //     height: 30px;
        //     background-size:cover;
        //     z-index: 1000;
        // }
    }
    /*任务样式*/
    .Cat-task{
        position: relative;
        width: 100%;
        margin-top: 12px;
        padding-bottom: 60px;
    }
    .Cat-task-title{
        position: relative;
        width: 90%;
        height: 60px;
        margin: 0 auto;
        top: 40px;
        border-radius: 0!important;
        border-bottom: 1px solid #47cecf;
        span{
            display: inline-block;
            height: 30px;
            border-left: 10px solid #47cecf;
            padding-left: 1%;
            line-height: 30px;
            font-weight: bold;
            color: #2DC7C8;
            font-size: 24px;
        }
    }
    .hascompal{//完成任务样式
        background: #DCDCDC!important;
        border: 1px solid #DCDCDC!important;
        color: #ffffff!important;
    }
    .Cat-task-con{
        position: relative;
        width: 88%;
        margin: 0 auto;
        margin-top: 80px;
        ul{
            display: flex;
            list-style: none;
            padding: 0;
            width: 100%;
            height: 50px;
            align-items: center;
            padding-left: 2%;
            border-bottom: 1px solid #eeeeee;
            li{
                width: 33.3%;
                height: 100%;
                span{
                    display: block;
                }
            }
        }
    }
    .Cat-task-con>ul>li:last-child{
        text-align: right;
        span{
            display: inline-block;
            width: 50%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #34CECF;
            border:1px solid rgba(49,202,203,1);
            border-radius:20px;
            cursor: pointer;
        }
    }
    .Cat-task-con-title{
        color: #484848;
        font-weight: bold;
        font-size: 14px;
    }
    .Cat-task-con-title-lo{
        color: #ccc;
        padding-top: 10px;
        font-size: 12px;
    }
</style>